<template>
  <div>
    <slot></slot>
    <div class="job mx-auto">
      <div class="title">完善资料</div>
      <div class="form-tips text-center">完善基本信息可以给您推荐最智能的方案!</div>
      <el-form ref="formRef" :model="formData" label-width="0" :rules="formRules" class="w-100">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入你的姓名" size="large"></el-input>
        </el-form-item>
        <el-form-item label="出生年月" prop="birthday">
          <el-date-picker class="w100" :editable="false" v-model="formData.birthday" type="date" placeholder="请选择出生年月" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item v-if="addressData" label="居住地" prop="province">
          <zb-address ref="addressRef" :cur="address" :data="addressData" @confirm="addressConfirm" />
        </el-form-item>
        <el-form-item label="职业" prop="job">
          <el-input v-model="formData.job" placeholder="请输入您的职业" size="large"></el-input>
        </el-form-item>
        <el-form-item label="基本介绍" prop="content">
          <el-input v-model="formData.content" type="textarea" :rows="4" placeholder="请输入基本介绍" size="large"></el-input>
        </el-form-item>
        <el-button type="primary" class="submit-btn" @click="submit" size="large" :disabled="!canclick" :loading="loading">确定</el-button>
      </el-form>
    </div>
    
  </div>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue';
import { getresumeApi, updateresumeApi, getAreaApi } from '@/api/app'
import { ElMessage } from 'element-plus';
// import { useRouter } from 'vue-router'
const loading = ref(false)
const addressRef = ref();

const address = reactive({
  ids:[],
  text:'',
})

const canclick = computed(() => {
  return formData.name.length > 0 && formData.birthday.length > 0
})
const formData = reactive({
  name:'',
  birthday:'', //生日
  job:'', //职位
  content:'', // 简介
  province:'',
  city:'',
  area:'',
})
const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: ['change', 'blur'] }
  ],
  birthday: [
    { required: true, message: '请选择出生年月', trigger: ['change', 'blur'] }
  ],
}

const formRef = ref();
const emits = defineEmits(['ok'])
const submit = async () => {
  await formRef.value?.validate();
  loading.value = true;
  updateresumeApi({...formData, ...address.ids}).then(()=>{
    loading.value = false;
    ElMessage.success('资料更新成功');
    emits('ok')
  }).catch(()=>{
    loading.value = false;
    ElMessage.error('资料更新失败')
  })
}

// 获取省市区
const addressData = ref()
const getAear = () => {
  getresumeApi().then(res=>{
    if(!res) return;
    for(let key in formData){
      formData[key] = res[key]
    }
    address.ids = [res.province, res.city, res.area];
    address.text = [res.province_text, res.city_text, res.area_text].join(' / ')
  })
  getAreaApi().then(res=>{
    addressData.value = res;
  })
}
getAear()

// 手机端获取地址
const addressConfirm = (e:any) => {
  // console.log('手机端获取地址',e)
  // formData.province = e.ids[0];
  // if(e.ids.length == 1){
  //   formData.province = e.ids[0];
  // }else if(e.ids.length == 2){
  //   formData.province = e.ids[0];
  //   formData.city = e.ids[1];
  // }else if(e.ids.length == 3){
  //   formData.province = e.ids[0];
  //   formData.city = e.ids[1];
  //   formData.area = e.ids[2];
  // }
  address.text = e.text;
  address.ids = e.ids
  
  console.log('eeeeeee', e)
  // if(props.addresskey == 'name'){
  //   formData.value[index].val = e.text
  // }
}
</script>

<style lang="scss" scoped>
$codeW:120px;
$rad:16px;
.job{
  padding: 1px 0 37px; background-color: #fff; border-radius: 16px; max-width:400px;
  .title{margin: 30px 0 8px; font-size:24px; color: #000; font-weight:bold; display: flex; align-items: center; justify-content: center; line-height: 1;}
  .form-tips{ margin-bottom: 20px; font-size: 16px;}
  :deep(.el-form-item){
    display: block;
    .el-cascader{width: 100%; display: block;}
    .el-input{height: auto !important; width: 100%;}
    .el-form-item__label{width: 100% !important; text-align: left; display: block; font-size: 16px;}
    .el-input__inner,.el-textarea{min-height: 52px;}
    .el-input__wrapper,.el-textarea__inner{border-radius: $rad; background-color: #F7F7F7; box-shadow: none; font-size: 16px;}
    .el-textarea__inner{padding: 10px 15px;}
  }
  .submit-btn{width:100%; height: 50px; border-radius: $rad; font-size: 16px;}
  .web{width: 100%;}
}
@media only screen and (max-width: 769px){
  .wap{display: block; width: 100%;}
  .web{display: none !important;}
  .job{
    width:100%; border-radius:0px; max-width: 100%; padding: 0 0.34rem;
    .title{font-size:0.34rem; margin:-0.6rem auto 0.2rem;height: 0.6rem;}
    .submit-btn{margin: 0.2rem 0 0.6rem; height: 1rem; border-radius: 0.32rem; font-size: 0.32rem;}
    .form-tips{line-height: 1; display: none;}
    :deep(.el-form-item){
      display: block;
      .el-input{height: auto !important; width: 100%;}
      .el-form-item__label{width: 100% !important; text-align: left; display: block; font-size: 0.3rem;}
      .el-input__inner,.el-textarea{min-height: 0.8rem;}
      .el-input__wrapper,.el-textarea__inner{border-radius: 0.2rem; background-color: #F7F7F7; box-shadow: none; font-size: 0.3rem; width: 100%;}
      .el-textarea__inner{padding: 0.1rem 0.15rem;}
    }
  }
}
</style>